<template>
	
	<view class="page">
		<view>
			<view class="header">
				<image src="/static/logo.png"></image>
				<view class="title">澳乐居</view>
			</view>
			<view class="note">
				<view class="note-request">申请获取一下权限</view>
				<view class="note-content">获得你的公开信息（昵称，头像，地区及性别）</view>
			</view>
			<view class="footer">
				<button type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">快速登录</button>
			</view>
			
		</view>
	</view>
	
</template>
	
<script>
	import{
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		data() {
			return {
			    sessionKey: '',
			    openid: '',
				unionid:'',
				disabled:true,
				mobile:'',
				shouquan:true,
				denglu:false
			};
		},
		onLoad(options) {
			this.wxLogin();
		},
		computed:{
			...mapState(['forcedLogin', 'hasLogin', 'token','usertype'])
		},
		methods:{
			...mapMutations(['logout','login']),
			
				wxLogin(){
				let that = this;
				uni.showLoading({
					title:"登录中..."
				});
				
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						uni.hideLoading();
						let code = loginRes.code;
						console.log("uni.login-code:"+code);
						let appid = 'wx1158bab1fee0f8cc';
						let secret = '53e89f16337b46ea04b3c42c9d412300';
						
						// 获取七牛openid、sessionKey
						let url = that.global_url + '/qiniu/getOpenid?code=' + code;
						console.log("url:" + url);
						uni.request({
							url:url,
							method:'POST',
							header : {'content-type':'application/json'},
							data:'',
							success:(res) => {
								console.log("date: " + JSON.stringify(res.data));
								that.openid = res.data.openid;
								that.unionid = res.data.unionid;
								that.sessionKey = res.data.sessionKey;
								uni.setStorageSync('openid', that.openid);//存储openid
								console.log('openid:'+that.openid + '****unionid:'+that.unionid + '***sessionKey:'+that.sessionKey)
							},
							fail:(error,code) => {
								console.log("error: " + JSON.stringify(error));
							}
						});
					},
					fail(e) {
						uni.hideLoading();
					}
				});
			},
			wxGetUserInfo(){
				console.log("点击登录微信获取信息")
				console.log(this.global_url)
				let global_url = this.global_url;
				let that = this;
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: function (infoRes) {
						// console.log("infoRes: " + JSON.stringify(infoRes));
						let avatar = infoRes.userInfo.avatarUrl;
						let nickname = infoRes.userInfo.nickName;
						let gender = infoRes.userInfo.gender;
						let language = infoRes.userInfo.language;
						let country = infoRes.userInfo.country;
						let province = infoRes.userInfo.province;
						let city = infoRes.userInfo.city;
						
						let url= global_url + '/login/VerifyThirdParty?loginPath=w&opendId='+that.openid + '&unionid=' + that.unionid + '&mobile='+that.mobile
						+'&avatar=' + avatar+'&nickname='+nickname + '&country='+country+'&province='+province+'&city='+city+'&token=' + that.token;
						// +'&country=' + infoRes.userInfo.country+'&province='+infoRes.userInfo.province+'&city='+infoRes.userInfo.city;
						console.log(url);
						uni.request({
							url:url,
							method:"POST",
							header:{'content-type':'application/json'},
							data:'',
							success:(res) => {
								console.log("res: " + JSON.stringify(res.data));
								if(res.data.status == 200){
									that.login(res.data.info.token);
									uni.reLaunch({
										url: '/pages/tabBar/component/component',
									});
									uni.showToast({
										title: '微信登录成功!',
										duration: 2000,
										icon:'none'
									});
								}
								
							},
							fail:(error) => {
								console.log("error: " + JSON.stringify(error));
							}
						})
					}
				});
			}
			
		}
		
	}
</script>

<style>
	
	.page{
		background: #FFFFFF;
	}
	
	.header{
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		border-bottom: 1rpx solid #ccc;
		margin: 50rpx 0 0 50rpx;
	}
	
	.header image{
		width: 150rpx;
		height: 150rpx;
	}
	.title{
		font-size: 38upx;
		color: #333333;
	}
	.note{
		margin: 50rpx 50rpx;
	}
	
	.note-request{
		font-size: 28rpx;
		color: #333333;
	}
	.note-content{
		font-size: 28rpx;
		color: #969696;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}
	
	.footer{
		margin-top: 100rpx;
		/* background-color: red; */
	}
	button{
		margin: 0 70rpx;
		/* background-color: #09BB07;
		color: #FFFFFF; */
	}
</style>
